<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <!-- bootstrap表格 -->
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="contact_cus_kpi">
        <div class="header">
            <div class="back">返回</div>
            <div class="type_select_wrapper"></div>
        </div>
        <div class="container">
            <div class="title">
                <div class="left_text">
                    <span class="on_member_name"></span>
                    <span class="on_member_assets_num">4</span>
                </div>
            </div>
            <div class="tab_wrapper">
                <div class="tab_item active">待分配的客户(<span class="un_assets_num">2</span>)</div>
                <div class="tab_item">待分配的群聊(<span class="un_assets_group_num">2</span>)</div>
            </div>
            <div class="un_assets_customer_wrapper">
                <div class="normal_btn distribution_btn">分配给其他成员</div>
                <div class="table_wrapper">
                    <form class="layui-form">
                        <table class="layui-table member_table">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" lay-filter="all_member_select" name="all_member_select"
                                            lay-skin="primary" value="全选">
                                    </th>
                                    <th>客户名称</th>
                                    <th>描述</th>
                                    <th>原添加人</th>
                                    <th>原添加人所属部门</th>
                                    <th>离职时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-id="0">
                                    <td>
                                        <input type="checkbox" lay-filter="member_select" name="member_select"
                                            lay-skin="primary" value="0">
                                    </td>
                                    <td>Mr.Fun</td>
                                    <td></td>
                                    <td>刘毅华</td>
                                    <td>长沙峰之道</td>
                                    <td>下午14:46</td>
                                </tr>
                                <tr data-id="1">
                                    <td>
                                        <input type="checkbox" lay-filter="member_select" name="member_select"
                                            lay-skin="primary" value="1">
                                    </td>
                                    <td>铠</td>
                                    <td></td>
                                    <td>刘毅华</td>
                                    <td>长沙峰之道</td>
                                    <td>下午14:46</td>
                                </tr>
                                <tr data-id="2">
                                    <td>
                                        <input type="checkbox" lay-filter="member_select" name="member_select"
                                            lay-skin="primary" value="2">
                                    </td>
                                    <td>毛不易</td>
                                    <td></td>
                                    <td>刘毅华</td>
                                    <td>长沙峰之道</td>
                                    <td>下午14:46</td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                    <div class="paging_style" id="paging"></div>
                </div>
            </div>
            <div class="un_assets_gourpchat_wrapper" style="display: none;">
                <div class="normal_btn groupchat_distribution_btn">分配给其他成员</div>
                <div class="table_wrapper">
                    <form class="layui-form">
                        <table class="layui-table groupchat_table">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" lay-filter="all_group_select" name="all_group_select"
                                            lay-skin="primary" value="全选">
                                    </th>
                                    <th>群聊</th>
                                    <th>群人数</th>
                                    <th>创建时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-id="0">
                                    <td>
                                        <input type="checkbox" lay-filter="group_select" name="group_select"
                                            lay-skin="primary" value="0">
                                    </td>
                                    <td>群聊一</td>
                                    <td>6</td>
                                    <td>2020-02-21</td>
                                </tr>
                                <tr data-id="1">
                                    <td>
                                        <input type="checkbox" lay-filter="group_select" name="group_select"
                                            lay-skin="primary" value="1">
                                    </td>
                                    <td>群聊二</td>
                                    <td>2</td>
                                    <td>2020-02-21</td>
                                </tr>
                                <tr data-id="2">
                                    <td>
                                        <input type="checkbox" lay-filter="group_select" name="group_select"
                                            lay-skin="primary" value="2">
                                    </td>
                                    <td>群聊三</td>
                                    <td>1</td>
                                    <td>2020-02-21</td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                    <div class="paging_style" id="group_paging"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 分配成员模态框 -->
    <!-- <div class="modal fade normal_modal" id="assets_member_modal" tabindex="-1" role="dialog"
        aria-labelledby="assets_member_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="assets_member_modal_label">选择分配资产的对象</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择成员</label>
                            <div class="layui-input-block">
                                <select name="asset_member_id" lay-search lay-verify="required">
                                    <option value="0">长沙沃邦：赵虹蕊</option>
                                    <option value="1">峰之道咨询：吕海洋</option>
                                    <option value="2">长沙沃邦：刘毅华</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" lay-submit
                            lay-filter="submit_dep_member">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div> -->
    <!-- 分配成员模态框 -->

    <!-- 分配成员模态框 -->
    <div class="modal fade normal_modal" id="logo_add_member_modal" tabindex="-1" role="dialog"
        aria-labelledby="logo_add_member_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="logo_add_member_modal_label">选择分配成员</h4>
                </div>
                <div class="modal-body">
                    <div class="select_person_wrapper">
                        <div class="left_wrapper">
                            <div class="logo_add_member_protree_container"></div>
                        </div>
                        <div class="right_wrapper">
                            <div class="title">已选择的成员</div>
                            <div class="selected">
                                <div class="department_members selected_members" id="logo_add_member_selected_members">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="logo_add_member_submit_dep_member">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 分配成员模态框 -->

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <!-- 树形结构 -->
    <script src="../../js/proTree.js"></script>
    <!-- 图表 -->
    <script src="../../js/highcharts/highcharts.js"></script>
    <script src="../../js/highcharts/exporting.js"></script>
    <script src="../../js/highcharts/no-data-to-display.js"></script>
    <!-- 公共方法 -->
    <script src="../../js/addPerson_data/data.js"></script>
    <script>
        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }
        var arr = [
            {
                id: 1,
                name: "长沙峰之道",
                pid: 2,
                department: true,
                Useful: true
            },
            {
                id: 2,
                name: "长沙沃邦",
                pid: 0,
                department: true,
                Useful: true
            },
            {
                id: 10,
                name: '子公司',
                pid: 1,
                department: true,
                Useful: true
            },
            {
                id: "LiuYiHua",
                name: "刘毅华",
                pid: 1,
                department: false,
                Useful: true
            },
            {
                id: "YeKaiQi",
                name: "叶铠齐",
                pid: 1,
                department: false,
                Useful: true
            },
            {
                id: "LiangXiaoLing",
                name: "梁小玲",
                pid: 1,
                department: false,
                Useful: true
            },
            {
                id: "WuFang",
                name: "吴访",
                pid: 10,
                department: false,
                Useful: true
            },
            {
                id: "ZhaoHongRui",
                name: "赵虹蕊",
                pid: 2,
                department: false,
                Useful: true
            },
            {
                id: "LvHaiYang",
                name: "吕海洋",
                pid: 2,
                department: false,
                Useful: true
            },
            {
                id: "ZengHongYun",
                name: "曾红云",
                pid: 2,
                department: false,
                Useful: true
            }
        ];
        var nav_index = getUrlParam('nav_index') // 接收到的nav_id
        var member_id = getUrlParam('id') // 接收到的成员id
        var member_name = decodeURI(getUrlParam('name')) // 接收到的成员名字
        $(".type_select_wrapper").text(member_name + '的企业资产')
        $(".on_member_name").text(member_name + '的资源·')
        console.log(member_id, member_name)
        layui.use('layer', function () {
            var layer = layui.layer;
            // 返回
            $(".back").click(function () {
                self.location.href = "../enterprise-staffing/distribution-assets.html?nav_index=" + nav_index
            })

            layui.use('form', function () {
                var form = layui.form;
                // tab 切换
                $(".tab_item").eq(0).click(function () {
                    $(this).addClass('active')
                    $(".tab_item").eq(1).removeClass('active')
                    $(".un_assets_customer_wrapper").show()
                    $(".un_assets_gourpchat_wrapper").hide()
                })
                $(".tab_item").eq(1).click(function () {
                    $(this).addClass('active')
                    $(".tab_item").eq(0).removeClass('active')
                    $(".un_assets_customer_wrapper").hide()
                    $(".un_assets_gourpchat_wrapper").show()
                })

                var assets_type = "" // 分配成员类型 判断是从客户点击进入，还是从群聊点击进入

                // 待分配客户 全选
                form.on('checkbox(all_member_select)', function (data) {
                    if (data.elem.checked) {
                        $("input[name=member_select]").prop('checked', true)
                        form.render('checkbox')
                    } else {
                        $("input[name=member_select]").prop('checked', false)
                        form.render('checkbox')
                    }
                })

                // 待分配客户 有一个未选中全选取消选中
                form.on('checkbox(member_select)', function (data) {
                    var item = $("input[name=member_select]");
                    for (var i = 0; i < item.length; i++) {
                        if (item[i].checked == false) {
                            $("input[name=all_member_select]").prop("checked", false);
                            form.render('checkbox');
                            break;
                        }
                    }
                    //如果都勾选了  勾上全选
                    var all = item.length;
                    for (var i = 0; i < item.length; i++) {
                        if (item[i].checked == true) {
                            all--;
                        }
                    }
                    if (all == 0) {
                        $("input[name=all_member_select]").prop("checked", true);
                        form.render('checkbox');
                    }
                });
                var selectedMember = [] // 已选择的待分配客户
                var selectedGroupchat = [] // 已选择的待分配群聊
                // 待分配客户 分配给其他成员
                $(".distribution_btn").click(function () {
                    let memberList = $("input[name=member_select]")
                    memberList.each(function () {
                        if ($(this).prop('checked') == true) {
                            selectedMember.push($(this).val()) // 将选择的客户id添置数组
                        }
                    })
                    if (selectedMember.length == 0) {
                        layer.msg('请选择待分配的客户')
                        return
                    } else {
                        assets_type = "customer"
                        $("#logo_add_member_selected_members").html("")
                        $("#logo_add_member_modal").modal('show')
                    }
                });

                // 待分配群聊 全选
                form.on('checkbox(all_group_select)', function (data) {
                    if (data.elem.checked) {
                        $("input[name=group_select]").prop('checked', true)
                        form.render('checkbox')
                    } else {
                        $("input[name=group_select]").prop('checked', false)
                        form.render('checkbox')
                    }
                })

                // 待分配群聊 有一个未选中全选取消选中
                form.on('checkbox(group_select)', function (data) {
                    var item = $("input[name=group_select]");
                    for (var i = 0; i < item.length; i++) {
                        if (item[i].checked == false) {
                            $("input[name=all_group_select]").prop("checked", false);
                            form.render('checkbox');
                            break;
                        }
                    }
                    //如果都勾选了  勾上全选
                    var all = item.length;
                    for (var i = 0; i < item.length; i++) {
                        if (item[i].checked == true) {
                            all--;
                        }
                    }
                    if (all == 0) {
                        $("input[name=all_group_select]").prop("checked", true);
                        form.render('checkbox');
                    }
                });

                // 待分配群聊 分配给其他成员
                $(".groupchat_distribution_btn").click(function () {
                    let groupList = $("input[name=group_select]")
                    selectedGroupchat = [] // 已选择的待分配群聊
                    groupList.each(function () {
                        if ($(this).prop('checked') == true) {
                            selectedGroupchat.push($(this).val()) // 将选择的客户id添置数组
                        }
                    })
                    if (selectedGroupchat.length == 0) {
                        layer.msg('请选择待分配的群聊')
                        return
                    } else {
                        assets_type = "groupchat"
                        $("#logo_add_member_selected_members").html("")
                        $("#logo_add_member_modal").modal('show')
                    }
                });

                var logo_add_member_memberSelected = []; // 选择的成员
                //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
                $(".logo_add_member_protree_container").ProTree({
                    arr: arr,
                    close: true,
                    simIcon: "iconfont icon-geren", //单个标题字体图标 不传默认glyphicon-file
                    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
                    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
                    callback: function (id, name, pid, department, useful) {
                        let data = [{
                            id,
                            name,
                            pid,
                            department,
                            useful
                        }];
                        let isAdd = true;
                        if (logo_add_member_memberSelected.length > 0) {
                            for (let i = 0; i < logo_add_member_memberSelected.length; i++) {
                                if (logo_add_member_memberSelected[i].name == data[0].name) {
                                    isAdd = false
                                    layer.msg('已经选过此成员了')
                                    break
                                }
                            }
                        }
                        if (department == "false") {
                            if (isAdd) {
                                logo_add_member_memberSelected = data;
                                $("#logo_add_member_selected_members").html(`
                        <div class="mem_item">
                            <i class="iconfont icon-geren"></i>
                            <span data-id="${data[0].id}" data-pid="${data[0].pid}" data-dep="${data[0].department}" data-useful="${data[0].useful}">${data[0].name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `);
                            }
                        }
                    }
                });
                // 删除部门、成员
                $("#logo_add_member_selected_members").on("click", ".delete_dep_mem", function () {
                    let id = $(this)
                        .siblings("span")
                        .attr("data-id");
                    let dep = $(this)
                        .siblings("span")
                        .attr("data-dep");
                    $(this)
                        .parent()
                        .remove();
                    for (let i = 0; i < logo_add_member_memberSelected.length; i++) {
                        if (id == logo_add_member_memberSelected[i].id) {
                            logo_add_member_memberSelected.splice(i, 1);
                            break;
                        }
                    }
                });
                // 拿到分配给其他成员的成员数据
                $("#logo_add_member_submit_dep_member").click(function () {
                    totalDatalist = logo_add_member_memberSelected;
                    console.log('logo_add_member_memberSelected', logo_add_member_memberSelected)
                    // 请求ajax
                    if (assets_type == 'customer') {
                        // 从待分配客户点击进入的
                        if (totalDatalist.length == 0) {
                            layer.msg('请选择分配成员')
                            return
                        }
                        // selectedMember 为当前选择的待分配客户数组
                        console.log('selectedMember', selectedMember)
                        // 请求ajax

                        // ajax执行完后
                        selectedMember = []
                        $("input[name=member_select]").each(function () {
                            if ($(this).prop('checked') == true) {
                                $(this).prop('checked', false)
                            }
                        })
                        $("input[name=all_member_select]").prop('checked', false)
                        form.render()
                        $("#logo_add_member_modal").modal('hide')
                        layer.msg('分配成功')
                    } else {
                        // 从待分配群聊点击进入的
                        if (totalDatalist.length == 0) {
                            layer.msg('请选择分配成员')
                            return
                        }
                        // selectedGroupchat 为当前选择的待分配客户数组
                        console.log('selectedGroupchat', selectedGroupchat)
                        // 请求ajax

                        // ajax执行完后
                        selectedGroupchat = []
                        $("input[name=group_select]").each(function () {
                            if ($(this).prop('checked') == true) {
                                $(this).prop('checked', false)
                            }
                        })
                        $("input[name=all_group_select]").prop('checked', false)
                        form.render()
                        $("#logo_add_member_modal").modal('hide')
                        layer.msg('分配成功')
                    }
                });

                // 表格分页
                layui.use('laypage', function () {
                    var laypage = layui.laypage;

                    // 待分配客户 分页
                    laypage.render({
                        elem: 'paging',
                        limit: 5,
                        theme: '#E51C23',
                        count: 20, //数据总数，从服务端得到
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if (!first) {
                                //do something
                            }
                        }
                    })
                    // 待分配群聊 分页
                    laypage.render({
                        elem: 'group_paging',
                        limit: 5,
                        theme: '#E51C23',
                        count: 20, //数据总数，从服务端得到
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if (!first) {
                                //do something
                            }
                        }
                    })
                });

            })

        })
    </script>
</body>

</html>